<template>
  <el-dialog title="查看" :visible.sync="dialogVisible"
  width="800px" append-to-body>
    <div style="max-height: 520px;overflow: auto;">
      <el-scrollbar style="height:100%;">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" size="small">

           <el-form-item label="题目选项:">
             <el-table :data="ruleForm.optionBOList" border style="width: 100%;">
                <el-table-column
                   label="选项"
                   align="center"
                   width="80"
                   prop="date">
                    <template  slot-scope="scope">
                      <span>{{scope.row.optionKey}}</span>
                    </template>
                 </el-table-column>
                 <el-table-column
                    label="选项内容"
                    width="400"
                    prop="date">
                    <template  slot-scope="scope">
                      <el-input
                        type="textarea"
                        :rows="2"
                        placeholder="请输入内容"
                        v-model="scope.row.optionValue">
                      </el-input>
                    </template>
                  </el-table-column>

             </el-table>
           </el-form-item>
           <el-form-item label="题目答案:" prop="rightKey" v-if="ruleForm.subjectType === 1">
             <el-select v-model="ruleForm.rightKey" placeholder="请选择">
                <el-option
                  v-for="item in ruleForm.optionBOList"
                  :key="item.optionKey"
                  :label="item.optionKey+'.'+item.optionValue"
                  :value="item.optionKey">
                </el-option>
              </el-select>
           </el-form-item>
           <el-form-item label="题目答案:" prop="rightKey" v-if="ruleForm.subjectType === 2">
             <el-select v-model="ruleForm.rightKey" multiple placeholder="请选择" style="width: 100%;">
                <el-option
                  v-for="item in ruleForm.optionBOList"
                  :key="item.optionKey"
                  :label="item.optionKey+'.'+item.optionValue"
                  :value="item.optionKey">
                </el-option>
              </el-select>
           </el-form-item>
        </el-form>
      </el-scrollbar>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="resetForm('ruleForm')" size="small">取消</el-button>
      <el-button type="primary" @click="submitForm('ruleForm')" size="small">确认</el-button>
    </span>
  </el-dialog>
</template>

<script>
	import { addAnswerData,updateAnswerData } from "@/api/associatedIndustry.js"
export default {
  data() {
    return {
      ruleForm: {
        optionBOList: [],
        rightKey: undefined,
        courseSectionId:undefined,
        chapterQuestionId:undefined
      },
      awList:['A','B','C','D','E','F'],
      rules: {
        subjectType: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        timeSecond: [{ required: true, message: "请输入", trigger: "blur" }],
        subject: [{ required: true, message: "请输入", trigger: "blur" }],
        rightKey: [{ required: true, message: "请输入", trigger: "blur" }],
      },
      dialogVisible: false,
    };
  },
  methods: {
    timeSecondFun (val) {
      if (val.split('.').length > 1){
        this.ruleForm.timeSecond = val.split('.')[0]
      } else {
        this.ruleForm.timeSecond = val
      }
    },
    rightKeyInit () {
      this.ruleForm.rightKey = undefined
    },
    // 打开
    open(row) {
      this.ruleForm=row
      if (this.ruleForm.subjectType === 2) {
        let rightKey = []
        for(let i = 0;i<this.ruleForm.rightKey.length; i++){
          rightKey.push(this.ruleForm.rightKey[i])
        }
        this.ruleForm.rightKey = rightKey
      }
      this.dialogVisible = true
    },

    // 关闭
    close() {
      this.dialogVisible = false;
    },
    addOption (index) {
      console.log(1)
      this.ruleForm.optionBOList.push({
        optionKey: this.awList[index],
        optionValue: ''
      })
    },
    resetForm(formName){
      this.close()
    },
    // 表单提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = this.ruleForm
          if (this.ruleForm.subjectType === 2) {
            let rightKey = ''
            this.ruleForm.rightKey.filter(res => {
              rightKey = rightKey + res
            })
            data.rightKey = rightKey
          }
          updateAnswerData(data).then(res=>{
            if (res.data.code === 200) {
              this.$message.success("操作成功")
              this.close()
              this.$emit('update')
            }
          })
        } else {
          return false;
        }
      });
    },
  },
};
</script>
